<template>
    <div>

        <!-- 搜索框部分-->
        <el-date-picker v-model="notTime" type="date" style="width: 123px;margin-left: 900px;" size="mini"
                        placeholder="请选择日期" format="yyyy-MM-dd" clearable
                        @change="selectStorages"></el-date-picker>
        &nbsp;
        <el-button type="success" size="mini" @click="setStorageinState(1)">已入库</el-button>
        <el-button type="info" size="mini" @click="setStorageinState(2)">待审核</el-button>

        <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="storages"
                tooltip-effect="dark"
                style="width: 100%"
        >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="商品名称">
                            <span>{{ props.row.storagesDetails.goodName }}</span>
                        </el-form-item>
                        <el-form-item label="商品单价">
                            <span>{{ props.row.storagesDetails.price }}</span>
                        </el-form-item>
                        <el-form-item label="入库数量">
                            <span>{{ props.row.storagesDetails.quantity }}</span>
                        </el-form-item>
                        <el-form-item label="入库总价">
                            <span>{{ props.row.storagesDetails.quantity * props.row.storagesDetails.price }}</span>
                        </el-form-item>
                        <el-form-item label="品种类型">
                            <span>{{ props.row.storagesDetails.brandName }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    prop="purchaseId"
                    sortable
                    label="采购订单Id">
            </el-table-column>
            <el-table-column
                    prop="goodName"
                    label="采购商品">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="入库负责人">
            </el-table-column>
            <el-table-column
                    prop="nowTime"
                    label="入库时间">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.nowTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="storageinState"
                    label="仓库状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.storageinState === 1">
                        <el-tag type="success">已入库</el-tag>
                    </span>
                    <span v-else-if="scope.row.storageinState === 2">
                       <el-tag type="info" plain disabled>未质检</el-tag>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.storageinState== 1" size="mini" type="success" plain disabled>
                        已审核
                    </el-button>
                    <el-button v-show="scope.row.storageinState== 2" size="mini" type="warning"
                               @click="open1(scope.row)">待审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="limit.page"
                    :page-sizes="[2, 4,6, 8]"
                    :page-size="limit.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="limit.totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import moment from 'moment';

export default {
    data() {
        return {
            storages: null,
            notTime: "",
            storageinState: null,
            loading: true,
            limit: {
                page: 1,      // 当前页
                limit: 2,    // 显示数
                totalCount: 0
            }
        }
    },
    watch: {
        notTime: function (newValue, oldValue) {
            if (newValue === null) {
                this.storageinState = 3
                this.selectStorages(true)
            }
        }
    },
    methods: {
        setStorageinState(x) {
            this.storageinState = x;
            this.limit.page = 1;
            this.selectStorages();
        },
        selectStorages() {
            this.loading = true;
            {
                let toLocaleString = '';
                if (this.notTime instanceof Date) {
                    const format = 'YYYY-MM-DD';
                    toLocaleString = moment(this.notTime).format(format);
                }

                const data = this.$qs.stringify({
                    nowTime: toLocaleString,
                    storageinState: this.storageinState,
                    page: this.limit.page,
                    limit: this.limit.limit
                });
                this.$http.post("http://localhost:8500/storages/selectStorages", data
                ).then(res => {
                    this.storages = res.data.t
                    this.limit.totalCount = res.data.count
                })
                setTimeout(() => {
                    this.loading = false;
                }, this.floor(1000));
            }
        },
        open1(data) {
            const tables = `<table style="width: 100%;border-spacing: 20px; margin-left:-17px">
                            <tr>
                            <td>采购Id : ${data.purchaseId}</td>
                            <td>采购人 : ${data.userName}</td>
                            </tr>
                            <tr>
                            <td>商品名称 : ${data.storagesDetails.goodName}</td>
                            <td>商品单价 : ${data.storagesDetails.price}</td>
                            </tr>
                             <tr>
                            <td>入库数量 : ${data.storagesDetails.quantity}</td>
                            <td>总价 : ${data.storagesDetails.quantity * data.storagesDetails.price}</td>
                            </tr>
                            </table>`
            this.$alert(tables, `审核`, {
                dangerouslyUseHTMLString: true,
                showCancelButton: true,
                confirmButtonText: '审核',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '审核中...';
                        setTimeout(() => {
                            this.$http.post("http://localhost:8500/storages/approve", this.$qs.stringify({
                                    purchaseId: data.purchaseId,
                                    goodId: data.goodId,
                                    num: data.storagesDetails.quantity
                                })
                            ).then(res => {
                                this.selectStorages()
                                done()
                                setTimeout(() => {
                                    instance.confirmButtonLoading = false;
                                    this.msg("审核通过,已入库", "success")
                                }, this.floor(300));
                            })
                        }, this.floor(1000));
                    } else {
                        done()
                        this.$message('取消审核')
                    }
                }
            })
        }
        ,
        handleSizeChange(val) {
            this.limit.limit = val;  // 修改显示数
            this.selectStorages()
        }
        ,
        handleCurrentChange(val) {
            this.limit.page = val;  // 更新当前的页
            this.selectStorages()
        }, floor(num) {
            return Math.floor(Math.random() * num)
        }, msg(msg, val) {
            this.$message({
                message: msg,
                type: val
            });
        }
    }, created() {
        this.selectStorages()
    }
}
</script>

<style scoped>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 55px;
    width: 28.8%;
}

body {
    margin: 0;
}

</style>


<script setup>
</script>